<template>
  <div>
    <v-icon @click="theme.cycle()" size="small" icon="mdi-theme-light-dark" class="icon-btn mr-2" />

    <v-menu>
      <template #activator="{ props }">
        <v-icon v-bind="props" size="small" icon="mdi-translate" class="icon-btn" />
      </template>
      <v-list>
        <v-list-item @click="SetLocale('zh')">
          <v-list-item-title>中文</v-list-item-title>
        </v-list-item>
        <v-list-item @click="SetLocale('en')">
          <v-list-item-title>English</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script setup lang="ts">
import { useTheme } from "vuetify";
import { useI18nStore } from "@/stores/i18nStore";
const { SetLocale } = useI18nStore();

const theme = useTheme();
</script>
